<!-- cashSetting -->
<template>
  <div class="cashSetting content_box">
    <h4>提现设置</h4>
    <div class="headder_setting float_none">
      <el-row class="header_row" :gutter="30">
        <el-col :span="12">
          <div class="flex align-center">
            <span class="tit_span nowarp">最低提现金额：</span>
            <el-input type="number" v-model="setting.MinMoney" @keyup.native="proving2($event)" min="0">
              <template slot="append">元</template>
            </el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex align-center">
            <span class="tit_span nowarp">税点设置：</span>
            <el-input type="number" v-model="setting.TaxPoint" @keyup.native="proving2($event, '%')" min="0">
              <template slot="append">%</template>
            </el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex align-center">
            <span class="tit_span nowarp">服务费设置：</span>
            <el-input type="number" v-model="setting.ServiceCharge" @keyup.native="proving2($event)" min="0">
              <template slot="append">元/笔</template>
            </el-input>
          </div>
        </el-col>
        <!-- <el-col :span="12">
          <div class="flex align-center">
            <span class="tit_span nowarp">是否需要审核：</span>
            <el-switch
              v-model="setting.IsActive"
              active-text="是"
              inactive-text="否"
            >
            </el-switch>
          </div>
        </el-col> -->
        <el-col :span="12">
          <div class="flex align-center">
            <span class="tit_span nowarp">提现时间：</span>
            <el-select v-model="value" placeholder="请选择" @change="time">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :disabled="item.disabled" :value="item.value">
              </el-option>
            </el-select>
            <span class="margin">至</span>
            <el-select v-model="value1" placeholder="请选择" @change="time1">
              <el-option v-for="item in options1" :key="item.value" :label="item.label" :disabled="item.disabled" :value="item.value">
              </el-option>
            </el-select>

          </div>
        </el-col>
      </el-row>
      <el-button class="float_right" type="primary" @click="save" v-if="hasBtn('cashSetting:save')">保存设置</el-button>
    </div>
    <h4>提现列表</h4>
    <div class="header_row flex align-center flex-wrap">
      <div class="flex align-center m-r-2">
        <span>时间：</span>
        <el-date-picker v-model="searchObj.timeValue" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
        </el-date-picker>
      </div>
      <div class="flex align-center m-r-2">
        <span>用户名：</span>
        <el-input v-model="searchObj.UserName" placeholder="请输入内容" clearable></el-input>
      </div>
      <div class="flex align-center m-r-2">
        <span>手机号：</span>
        <el-input v-model="searchObj.UserPhone" placeholder="请输入内容" clearable></el-input>
      </div>
      <div class="flex align-center m-r-2">
        <span>提现状态：</span>
        <el-select v-model="searchObj.State" placeholder="">
          <el-option v-for="item in cashOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="(searchObj.currentPage = 1), getTable()">查询</el-button>
    </div>

    <div class="m-b-1 flex align-center space-between">
      <div></div>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchObj.currentPage" :page-size="searchObj.size" layout="total, prev, pager, next, jumper , sizes" :total="pageTotal">
      </el-pagination>
    </div>
    <el-table class="m-b-1" :data="tableData" border style="width: 100%" stripe>
      <el-table-column prop="index" label="序号" align="center" fixed>
      </el-table-column>
      <el-table-column prop="ApplyNum" label="提现单编号" align="center">
      </el-table-column>
      <!-- 团队直营 或 个人直营 -->
      <el-table-column prop="ApplyDate" width="120" label="提现单创建时间" align="center">
      </el-table-column>
      <el-table-column prop="ApplyState" label="提现单状态" align="center">
        <template slot-scope="scope">{{scope.row.ApplyState|filVerify}}</template>
      </el-table-column>
      <el-table-column prop="UserName" label="用户名" align="center">
      </el-table-column>
      <!-- <el-table-column prop="UserId" label="用户ID" align="center">
      </el-table-column> -->
      <el-table-column prop="UserPhone" width="120" label="手机号码" align="center">
      </el-table-column>
      <el-table-column prop="WithdrawMoney" label="提现金额" align="center">
      </el-table-column>
      <el-table-column prop="TaxMoney" label="税费" align="center">
      </el-table-column>
      <el-table-column prop="ServiceCharge" label="提现服务费" align="center">
      </el-table-column>
      <el-table-column prop="Receivable" label="应打款金额" align="center">
      </el-table-column>
      <el-table-column prop="AccountName" width="120" label="收款账户" align="center">
      </el-table-column>
      <el-table-column prop="CardNum" label="结算账户" align="center">
      </el-table-column>
      <el-table-column prop="BankName" label="开户行" align="center">
      </el-table-column>
      <el-table-column prop="AuditBy" label="审核人" align="center">
      </el-table-column>
      <el-table-column prop="AuditDate" width="120" label="审核时间" align="center">
      </el-table-column>
      <el-table-column prop="RemitBy" label="打款人" align="center">
      </el-table-column>
      <el-table-column prop="RemitDate" width="120" label="打款时间" align="center">
      </el-table-column>
      <el-table-column width="120" label="打款凭证" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.Path == '-'">-</span>
          <img v-else style="width:40px;height:40px" :src="scope.row.Path" @click="handlePictureCardPreview(scope.row.Path)" alt="">
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" fixed="right" v-if="hasBtn('cashSetting:audit')">
        <template slot-scope="scope">
          <el-button size="mini" :type="calc(scope.row.ApplyState)" @click="handleEdit(scope.$index, scope.row)" :disabled="scope.row.ApplyState == 2 " v-if="hasBtn('cashSetting:audit')">{{scope.row.ApplyState|filVerify}}</el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提现单审核" :visible.sync="dialogVisible" width="30%">
      <div class="orderReview_box">
        <div class="flex align-left m-b-1">
          <span class="tit_span nowarp max-w m-b-1">提现单编号：</span>
          <span>{{verifyData.ApplyNum}}</span>
        </div>
        <div class="flex align-left m-b-1">
          <span class="tit_span nowarp max-w m-b-1">用户：</span>
          <span>{{verifyData.UserName}}</span>
        </div>
        <div class="flex align-left m-b-1">
          <span class="tit_span nowarp max-w m-b-1">提现金额：</span>
          <span>{{verifyData.WithdrawMoney + '元'}}</span>
        </div>
        <div class="flex align-left m-b-1">
          <span class="tit_span nowarp max-w m-b-1">税费：</span>
          <span>{{verifyData.TaxMoney + '%'}}</span>
        </div>
        <div class="flex align-left m-b-1">
          <span class="tit_span nowarp max-w m-b-1">提现服务费：</span>
          <span>{{verifyData.ServiceCharge + '元'}}</span>
        </div>
        <div class="flex align-left m-b-1">
          <span class="tit_span nowarp max-w m-b-1">应打款金额：</span>
          <span>{{verifyData.Receivable + '元'}}</span>
        </div>
        <div class="flex align-left m-b-1">
          <span class="tit_span nowarp max-w m-b-1">收款账户：</span>
          <span>{{verifyData.AccountName}}</span>
        </div>
        <div class="flex align-left m-b-1 align-center" v-if="verifyData.ApplyState == 1">
          <span class="tit_span nowarp max-w m-b-1">审核状态：</span>
          <div>
            <el-radio text-color="#409EFF" v-model="orderReview.f_status" :label="3" border>同意</el-radio>
            <el-radio text-color="#F56C6C" v-model="orderReview.f_status" :label="2" border>拒绝</el-radio>
          </div>
        </div>
        <div class="flex align-left m-b-1 align-center" v-if="show(verifyData.ApplyState)">
          <span class="tit_span nowarp max-w m-b-1">打款状态：</span>
          <el-radio-group v-model="orderReview.status">
            <el-radio-button :label="3" :disabled="verifyData.ApplyState==5">待打款</el-radio-button>
            <el-radio-button :label="4" :disabled="verifyData.ApplyState==5">打款中</el-radio-button>
            <el-radio-button :label="5" :disabled="verifyData.ApplyState!=4">已完成</el-radio-button>
          </el-radio-group>
        </div>
        <div class="flex align-left m-b-1 m-t-2 align-center" v-if='orderReview.status == 5'>
          <span class="tit_span nowarp  m-r-2">上传凭证:</span>
          <div class="align-center flex ">
            <img class="EquityPathImg m-r-2" v-show="verifyData.Path" :src="verifyData.Path" @click="handlePictureCardPreview(verifyData.Path)" alt="" />
            <el-upload :action="upload" :headers="headerObj" ref="uploadBox" multiple :before-upload="beforeUploadFun" :limit="1" :auto-upload="true" accept=".jpg, .jpeg, .png" :show-file-list="false" :on-success="upLoadSuccess">
              <el-button size="small" type="primary">点击上传</el-button>
              <el-button size="small" type="warning" @click.stop="clearPath">移除</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传1张jpg/jpeg/png文件
              </div>
            </el-upload>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="verifySave">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="上传凭证" :visible.sync="dialogVisible_upload" width="30%">

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_upload = false">取 消</el-button>
        <el-button type="primary" @click="verifySave">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible2" width="50%">
      <img style="width: 100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
  import { saveWithdraw, getWithdraw, getWithdrawDetail, GetApplyList, ChangeStateSave } from '@/api/system/withdraw'
  import { mapGetters } from 'vuex'
  import { GetUploadToken } from '@/api/ShareSetting/poster'

  export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'cashSetting',
    components: {},
    data() {
      //这里存放数据
      return {
        headerObj: {
          Authorization: ''
        },
        dialogVisible2: false,
        dialogImageUrl: "",
        upload: process.env.VUE_APP_UPLOAD_API + '/api/Tools/UploadFiles',
        status: false,
        verify: '审核',
        verifyData: {},
        value: 0,
        value1: 1,
        setting: {
        },
        searchObj: { currentPage: 1, State: 0, size: 10, UserPhone: '', UserName: '' },
        pageTotal: 0,
        tableData: [
          { index: 1 }
        ],
        dialogVisible: false,
        dialogVisible_upload: false,
        orderReview: {
          f_status: 0,
          status: 1
        },
        cashOptions: [
          { label: '全部', value: 0 },
          { label: '待审核', value: 1 },
          { label: '审核失败', value: 2 },
          { label: '待打款', value: 3 },
          { label: '打款中', value: 4 },
          { label: '已完成', value: 5 },
        ]
      };
    },
    //监听属性 类似于data概念
    computed: {
      ...mapGetters(['userInfo']),
      options() {
        let arr = []
        for (let i = 0; i <= 23; i++) {
          arr.push({
            value: i,
            label: i + ' 时',
            disabled: false
          })
        }
        return arr
      },
      options1() {
        let arr = []
        for (let i = 1; i <= 24; i++) {
          arr.push({
            value: i,
            label: i + ' 时',
            disabled: false
          })
        }
        return arr
      },
    },
    //监控data中的数据变化
    watch: {},
    filters: {
      filVerify(val) {
        switch (val) {
          case 1:
            return '待审核'
          case 2:
            return '审核失败'
          case 3:
            return '待打款'
          case 4:
            return '打款中'
          case 5:
            return '已完成'
        }
      },

    },
    //方法集合
    methods: {
      handlePictureCardPreview(file) {
        //图片放大
        this.dialogImageUrl = file;
        this.dialogVisible2 = true;
      },
      show(e) {
        switch (e) {
          case 1:
            this.verify = '审核'
            return false
          case 2:
            this.verify = '审核失败'
            return true
          default:
            this.verify = '审核成功'
            return true
        }
      },
      calc(e) {
        switch (e) {
          case 1:
            return "primary"
          case 3:
            return "info"
          case 2:
            return "danger"
          case 5:
            return "success"
          default:
            return "warning"
        }
      },
      async verifySave() {
        console.log(this.userInfo)
        let data = {
          "Id": this.verifyData.Id,
        }
        if (this.orderReview.status >= 3) {
          data.ApplyState = this.orderReview.status
          this.orderReview.status == 4 && (data.RemitId = this.userInfo.Id)
          this.orderReview.status == 3 && (data.AuditId = this.userInfo.Id)
        } else {
          data.ApplyState = this.orderReview.f_status
          data.AuditId = this.userInfo.Id
        }

        this.verifyData.Path && (data.Path = this.verifyData.Path)
        const { Code } = await ChangeStateSave(data)
        if (Code == 200) {

          this.$notify({
            title: '操作成功',
            message: 'success',
            type: 'success',
            duration: 2000
          })
          this.verifyData = {}
          this.getTable()
          this.dialogVisible = false
          this.dialogVisible_upload = false
        }
      },
      async getTable() {
        const id = {
          "Id": '00000000-0000-0000-0000-000000000000',
          'State': this.searchObj.State,
          'PageIndex': this.searchObj.currentPage,
          'PageSize': this.searchObj.size,
          "UserPhone": this.searchObj.UserPhone,
          "UserName": this.searchObj.UserName
        }
        if (this.searchObj.timeValue) {
          id.StartTime = this.searchObj.timeValue[0]
          id.EndTime = this.searchObj.timeValue[1]
        }
        const { Data, Total } = await GetApplyList(id)
        let Dnata = []
        if (Data) {
          Dnata = Data.map((item, index) => {
            for (let cell in item) {
              if (!item[cell] && this.$getType(item[cell]) !== 'Number') {
                item[cell] = '-'
              }
            }
            return { ...item, index: (index + 1) + ((this.searchObj.currentPage - 1) * 10) }
          })
        }
        this.tableData = Dnata
        this.pageTotal = Total
      },
      handleCurrentChange(e) {
        this.searchObj.currentPage = e
        this.getTable()
      },
      handleSizeChange(e) {
        this.searchObj.size = e
        this.searchObj.currentPage = 1
        this.getTable()
      },
      handleEdit(index, data) {
        this.dialogVisible = true
        this.verifyData = this.$deepClone(data)
        this.orderReview.status = data.ApplyState

      },
      async getSetting() {
        const { Data } = await getWithdrawDetail({})
        this.setting = Data || { Id: '00000000-0000-0000-0000-000000000000' }
        this.value = Data.StartTime
        this.value1 = Data.EndTime
        this.time()
        this.time1()
      },
      save() {
        this.setting.StartTime = this.value
        this.setting.EndTime = this.value1
        saveWithdraw(this.setting).then(() => {
          this.$notify({
            title: '操作成功',
            message: 'success',
            type: 'success',
            duration: 2000
          })
          this.getSetting()
          this.getTable()
        })
      },
      time() {
        for (const res of this.options1) {
          if (res.value <= this.value) {
            res.disabled = true
          } else {
            res.disabled = false
          }
        }
      },
      time1() {
        for (const res of this.options) {
          if (res.value >= this.value1) {
            res.disabled = true
          } else {
            res.disabled = false
          }
        }
      },
      async GetUploadTokenFun() {
        let { Data } = await GetUploadToken()
        this.headerObj.Authorization = Data || ''
      },
      async beforeUploadFun(e) {
        console.log(this.headerObj)
        if (!this.headerObj.Authorization) {
          return false
        }

      },
      clearPath() {
        this.verifyData.Path = ''
        this.$refs.uploadBox.uploadFiles = []
        this.$forceUpdate()
      },
      upLoadSuccess(res) {
        console.log('上传结束', res)
        console.log(this.$refs.uploadBox)
        if (res.code === 0) {
          // this.form.EquityPath = res.data.fileUrl
          this.verifyData.Path = res.data.fileUrl
          this.$forceUpdate()
        } else {
          if (this.sstimer) {
            clearTimeout(this.sstimer)
          }
          this.sstimer = setTimeout(() => {
            this.$notify({
              title: '上传失败',
              message: res.msg,
              type: 'warning',
              duration: 4500
            })
          }, 800)
        }
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getSetting()
      this.getTable()

      this.GetUploadTokenFun()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
//@import url(); 引入公共css类
  <style  scoped>
  .EquityPathImg {
    width: 60px;
    height: 60px;
  }
  .cashSetting >>> .el-dialog {
    min-width: 450px;
  }
  .headder_setting {
    width: 50%;
    min-width: 800px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 5px 3px #ececec;
    padding: 10px;
  }

  .tit_span {
    font-weight: 500;
  }

  .headder_setting .tit_span {
    width: 110px;
    font-size: 0.9rem;
  }
  .orderReview_box {
    margin-left: 15%;
    /* display: flex; */
    /* flex-direction: column;
                                                                                                                                                                                                                                              align-items: center; */
  }
  .margin {
    margin: 0 10px;
  }
  .max-w {
    width: 100px;
  }
</style>
